<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>3D 展览馆</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- css --> 
<link rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet"> 
<link href="css/flexslider.css" rel="stylesheet" /> 
<link href="css/style.css" rel="stylesheet" />
<style>
	body{
		background-image:img/img2.jpg;
	}
</style>
</head>
<body>
<div id="wrapper" class="home-page"> 
	<!-- start header -->
	<header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <span class="navbar-brand" >3D 展览馆</span>
                </div>
            </div>
        </div>
	</header>
	<!-- Slider -->
	<div id="main-slider" class="flexslider" style="width:100%;height:20%">
		<ul class="slides">
		  <li>
			<img src="img/img5.png" alt="" />
			<div class="flex-caption">
				<h3>3D Museum</h3> 
				<p>Welcome to The 3D Museum</p> 
			</div>
		  </li>
		</ul>
	</div>
		<!-- end slider --> 
	
	</section>  
		<section class="dishes">
			<div class="container" >
				<div class="row">
					<div class="col-md-12">
						<div class="aligncenter">历史的长河，时间的脚印，将他们埋没。3D展览馆不生产实物，我们只是搬运工，将遗失的记忆再次复原。</div>
						<br/>
						<div class="aligncenter">长长的记忆为你呈现......</div>
					</div>
				</div>
			
				<div class="row service-v1 margin-bottom-40" id="3dAppend">
				</div>
			</div>
		</section>
</div>
	<!-- javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="materialize/js/materialize.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.fancybox.pack.js"></script>
	<script src="js/jquery.fancybox-media.js"></script>  
	<script src="js/jquery.flexslider.js"></script>
	<script src="js/animate.js"></script>
	<!-- Vendor Scripts -->
	<script src="js/modernizr.custom.js"></script>
	<script src="js/jquery.isotope.min.js"></script>
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/animate.js"></script> 
	<script src="js/custom.js"></script>
	<script>
		function readJSON(){
			$.getJSON("3d.json", function (data){
				var $jsontip = $("#3dAppend");
			    var strHtml = "";
			    //存储数据的变量 
			   $.each(data, function (infoIndex, info){
					var name=info.name;
					var key=info.key
					var header=getHeader();
					var footer=getFooter(name,key);
					var content=header+footer;
					strHtml+=content;
			   }) 
			   $jsontip.append(strHtml);
			  //显示处理后的数据 
			});
		}
		function getHeader(){
			var header="<div class=\"col-md-3 md-margin-bottom-35\">"
			+"<div class=\"card small\">"
			+"<div class=\"card-image\">";
			return header;
		}
		
		function getFooter(name,key){
			var footer="<a href='../html/"+key+".html' target='_Blank'> <img class='img-responsive' src='3Dimg/"+key+".jpg' "
			+" alt='"+name+"'>"
			+"<span class='card-title'>"+name+"</span></a>"
			+"</div></div> </div>"
			return footer;
		}
		readJSON();
	</script>
	
</body>
</html>